<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <link rel="stylesheet" href="../css/all.css">
    <style>
    </style>
</head>
<body>
<div id="app" v-cloak>
    <form id="loginForm" class="center-form">
        <div class="form-item">
            <label class="form-label">登录名:</label>
            <input class="form-input" type="text" name="loginName" v-model="loginName">
        </div>
        <div class="form-item">
            <label class="form-label">密码:</label>
            <input class="form-input" type="password" name="pwd" v-model="pwd">
        </div>
        <div class="form-item">
            <label class="form-label">确认密码:</label>
            <input class="form-input" type="password" name="rePwd" v-model="rePwd">
        </div>
        <div class="form-item">
            <label class="form-label">姓名:</label>
            <input class="form-input" type="text" name="pwd" v-model="name">
        </div>
        <div class="form-item">
            <label class="form-label">性别:</label>
            <label>
                <input class="form-radio" type="radio" name="sex" value="1" v-model="sex" >
                <span>男</span>
            </label>
            <label>
                <input class="form-radio" type="radio" name="sex" value="2" v-model="sex" >
                <span>女</span>
            </label>
        </div>
        <div class="form-item">
            <label class="form-label">身份证:</label>
            <input class="form-input" type="text" name="idCard" v-model="idCard">
        </div>
        <div class="form-item">
            <label class="form-label">手机号:</label>
            <input class="form-input" type="text" name="phone" v-model="phone">
        </div>
<!--        <div class="form-item">-->
<!--            <label class="form-label">班级:</label>-->
<!--            <input class="form-input" type="text" name="clazzName" >-->
<!--        </div>-->
        <div class="form-item text-center">
            <button type="button" class="btn" @click="doReset" >重&nbsp;置</button>
            <button type="button" class="btn btn-primary" @click="doRegister($event)" >注&nbsp;册</button>
        </div>
        <hr>
        <div>
            <a href="./login.html">已有账户，去登录</a>
        </div>
    </form>
</div>
<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    //Vue.config.productionTip = false; // 控制控制台的日志功能
    //Vue.config.silent = true;  // 开启控制告警信息
    //Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            loginName: "",
            pwd: "",
            rePwd: "",
            name: "",
            sex: "1",
            idCard: "",
            phone: "",
            classId: ""
        },
        methods: {
            doReset() {
                this.loginName = "";
                this.pwd = "";
                this.rePwd = "";
                this.name = "";
                this.sex = "1";
                this.idCard = "";
                this.phone = "";
                this.classId = "";
            },
            doRegister(e) {
                //console.log(e, this.loginName, this.pwd);
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/front/stu/register",
                    data: {
                        loginName: this.loginName,
                        pwd: this.pwd,
                        rePwd: this.rePwd,
                        name: this.name,
                        sex: this.sex,
                        idCard: this.idCard,
                        phone: this.phone,
                        classId: this.classId
                    },
                    dataType: 'json',
                    success: (result) => {
                        toastr[result.success ? "success":"warning"](result.msg);
                        if(result.success) {
                            setTimeout(()=>{
                                location.href = baseUrl + "/public/login.html";
                            }, 500);
                        }
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            }
        }
    });

    // let db = openDatabase('exam_db', '1.0', 'exam DB', 2 * 1024 * 1024);
    // db.transaction(function (tx) {
    //     tx.executeSql("CREATE TABLE IF NOT EXISTS t_ta (id unique, msg)");
    //     tx.executeSql("INSERT INTO t_ta (id, msg) VALUES (1, '测试')");
    //     tx.executeSql("INSERT INTO t_ta (id, msg) VALUES (2, 'hello world')");
    // });
</script>
</body>
</html>